<template>
  <div class="hero-item mask">
    <div class="row fw">
      <div class="col">
        <div class="info">
          <div>ID:{{ d_id }}</div>
          <div class="name">{{ d_name }}</div>
          <div class="head">
            <img :src="d_avatar" alt />
          </div>
        </div>
      </div>
      <div class="col">
        <div class="attrs">
          <h4>基础属性</h4>
          <div class="attr-list">
            <AttrItem
              v-for="(val,key) in d_attrs"
              :key="key"
              v-model="d_attrs[key]"
              :type="key"
            >{{ attrNameMap[key] }}</AttrItem>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="growth">
          <h4>属性成长</h4>
          <div class="grow-list">
            <AttrItem
              v-for="(val,key) in d_growth"
              :key="key"
              v-model="d_growth[key]"
              :type="key"
            ></AttrItem>
          </div>
        </div>
      </div>
    </div>
    <div class="row sw">
      <SkillBlock v-for="item in d_skills" :key="item" />
    </div>
    <div class="operate row">
      <Button type="primary">技能</Button>
      <Button type="primary">修改</Button>
      <Button type="danger">删除</Button>
    </div>
  </div>
</template>
<script>
import Button from '../../common/Button.vue'
import { reactive, toRefs } from 'vue'
import SkillBlock from '../skill/SkillBlock.vue'
import AttrItem from './AttrItem.vue'
export default {
  components: { Button, SkillBlock, AttrItem },
  props: ['data'],
  setup(props, context) {
    const { id, name, avatar, attrs, growth, audio, skills } = props.data
   
    const state = reactive({ d_id: id, d_name: name, d_avatar: avatar, d_attrs: attrs, d_growth: growth, d_audio: audio, d_skills: skills })


    return {
      ...toRefs(state)
    }
  },
}
</script>
<style lang="less" scoped>
@import "../../../theme.less";
.hero-item {
  width: 542px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid @theme-line;
  .fw {
    text-align: center;
  }
  .info {
    padding-top: 20px;
    width: 80px;
  }
  .name {
    padding: 10px;
    color: @theme-line;
  }
  .head {
    position: relative;
    text-align: center;
    img {
      width: 60px;
      height: 60px;
      border-radius: 8px;
      cursor: pointer;
    }
  }
  .row,
  .col {
    display: flex;
    flex-wrap: wrap;
  }

  .attrs,
  .growth {
    padding: 10px;
    color: @theme-line;
    .attr-list,
    .grow-list {
      display: flex;
      flex-wrap: wrap;
      width: 200px;
      .attr-item {
        border-bottom: 1px solid @theme-line;
        &:nth-child(2n) {
          border-left: 1px solid @theme-line;
        }
      }
    }
    h4 {
      font-size: 24px;
      border-bottom: 1px solid @theme-line;
    }
  }

  .sw {
    border-top: 1px solid @theme-line;
    margin-top: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    min-height: 51px;
    .skill-block {
      width: 40px;
      margin-right: 2px;
      margin-bottom: 2px;

      &:nth-child(10n) {
        margin-right: 0;
      }
    }
  }
  .operate {
    border-top: 1px solid @theme-line;
  }
}
</style>